<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"  xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title>角色管理</title>
    <script th:src="@{/plugin/jquery/jquery-1.9.0.min.js}" type="text/javascript"></script>
    <link th:href="@{/plugin/ligerUI/skins/Aqua/css/ligerui-all.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/plugin/ligerUI/skins/Gray/css/all.css}" rel="stylesheet"/>
    <link th:href="@{/plugin/ligerUI/skins/ligerui-icons.css}" rel="stylesheet" type="text/css" />

    <script th:src="@{/plugin/ligerUI/js/core/base.js}" type="text/javascript"></script>

    <script th:src="@{/plugin/ligerUI/js/ligerui.all.js}" type="text/javascript"></script>
    <script th:src="@{/plugin/ligerUI/js/core/init-obj.js}" type="text/javascript"></script>
    <link th:href="@{/css/form.css}" rel="stylesheet"/>
    <script th:src="@{/js/mask.js}" type="text/javascript"></script>
    <script th:src="@{/js/utils.js}" type="text/javascript"></script>

    <style type="text/css">
        /* 半透明的遮罩层 */
        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5;  /* 透明度 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 50; /* 此处的图层要大于页面 */
            display:none;
        }
    </style>
    <script th:inline="javascript">
        /*<![CDATA[*/
        /*]]>*/
        var tree = null;
        var menuDate;
        var navtab = null;
        var MenuId = null;
        var url='';
        $(function () {
            $("#layout1").ligerLayout({leftWidth: 150});
            $("#tab1").ligerTab();
            navtab = $("#tab1").ligerGetTabManager();
            search();
        })
        function menuTree(secId){
            showDigWin("权限","dig",secId);
        }
        function showDigWin(title,id,secId){
            tree=$("#tree9").ligerTree({
                url:'roleAndMemberList',
                parms:{
                    id:secId
                },
                ajaxType:'post',
                checkbox: true,
                parentIcon: 'folder',
                childIcon: 'leaf' ,
                slide: false, //是否显示动画
                nodeWidth: 100,
                autoCheckboxEven:true,
                idFieldName: 'id',
                textFieldName:'name' ,
                parentIDFieldName:'parentId' ,
                onSuccess:function(data){
                    console.log(data);
                    for(var i=0;i<data.length;i++){
                        if(data[i].flag=='0'){
                            f_selectNode(data[i].id);
                            /*$("#"+data[i].id).find('.l-body .l-checkbox').unbind().click(function(){
                             return false;
                             });*/
                        }else if(data[i].flag=='1'){
                            f_selectNode(data[i].id);
                        }
                    }

                },
                error:function(){
                    $.ligerDialog.error('加载权限失败');
                },
            });
            showOverlay();
            var dlgedit=$.ligerDialog.open({
                title:title,
                target:$("#"+id),
                buttons: [  { text: '保存', onclick: function (i, d) {
                    var treeData=tree.getChecked()
                    if(treeData.length>0){
                        alert('111');
                        MenuId=treeData[0].data.id;
                        for(var i=1;i<treeData.length;i++){
                            MenuId+=','+treeData[i].data.id;
                        }
                        url = '../menu/role/saveMenuRole?menuId='+MenuId+'&roleId='+secId;
                    }else{
                        alert('222');
                        url = '../menu/role/deleteMenuRole?roleId='+secId;
                    }
                        $.ajax({
                            type: 'POST',
                            url:url,
                            success: function(data){
                                $.ligerDialog.success('保存成功');
                                tree.reload();
                                $("input").ligerHideTip();
                                d.hide();
                                hideOverlay();
                            },
                            error:function (data) {
                                console.log(data)
                            }
                        })
                }},
                    { text: '关闭', onclick: function (i, d) {
                        tree.reload();
                        $("input").ligerHideTip();
                        d.hide();
                        hideOverlay();
                    }}
                ]
            });
            $(".l-dialog-close").bind('mousedown',function()  //dialog右上角的叉
            {
                $("input").ligerHideTip();
                dlgedit.hide();
                hideOverlay();
            });


        }
        //勾选树节点
        function f_selectNode(str) {
            str = "," + str+",";
            var parm = function(data) {
                if (str.indexOf("," + data.id + ",") != -1)
                { return true; } else { return false }
            };
            tree.selectNode(parm);
        };
        function itemclick(item)
        {
            var obj = dataGrid.getSelected();
            var height = $(".l-layout-center").height();
            if(item.id=='add') {
                $.ligerDialog.open({
                    title:'添加角色',
                    target:$("#add"),
                    height: 150,
                    width: 400,
                    buttons: [ {
                        text: '确定', onclick: function (item, dialog) {
                            subs();
                            dialog.close();
                        } },
                    { text: '取消', onclick: function (item, dialog) {
                        dialog.close();
                        } } ] });
                /*f_addTab1(item.id, '添加成员', 'linkAdd', navtab, height);*/
            } else if(item.id=='update') {
                if(!obj){
                    $.ligerDialog.question("请选择要修改的数据！！！");
                    return;
                }
                f_addTab1(item.id, '修改角色', 'linkUpdate?id='+obj.id, navtab, height);
            } else if(item.id=='delete') {
                var obj= dataGrid.getSelecteds();
                var height = $(".l-layout-center").height();
                if(obj.length>0){
                    $.ligerDialog.confirm("确定删除所选数据吗?",function (data) {
                        if(data){
                            var ids ='';
                            /*<![CDATA[*/
                            for(var i=0;i<obj.length-1;i++){
                                ids+=obj[i].id+",";
                            }
                            ids+=obj[obj.length-1].id;
                            /*]]>*/
                            if(ids!=''){
                                $.ajax({
                                    type: 'POST',
                                    url: 'deleteBacth',
                                    data: {
                                        ids:ids
                                    },
                                    dataType: 'json',
                                    success: function(data){
                                        dataGrid.reload();
                                    }
                                });
                            }
                        }
                    })
                }else{
                    $.ligerDialog.question("请选择要删除的数据！！！");
                }
            } else if(item.id == 'member') {
                if(!obj){
                    $.ligerDialog.question("请选择角色！！！");
                    return;
                }
                f_addTab1(item.id, '角色成员管理', 'member/linkList?id='+obj.id+'&roleName='+obj.roleName, navtab, height);
            }
        }

        function toolbarclick(item)
        {
            var obj = dataGrid.getSelected();
            var height = $(".l-layout-center").height();
            if(item=='add') {
                var dlgedit=$.ligerDialog.open({
                    title:'添加角色',
                    target:$("#add"),
                    height: 150,
                    width: 400,
                    buttons: [ {
                        text: '确定', onclick: function (dialog) {
                            subs();
                            dlgedit.close();
                        } },
                    { text: '取消', onclick: function (dialog) {
                        $("input").ligerHideTip(); dlgedit.hide();
                        hideOverlay();
                        } } ] });
                $(".l-dialog-close").bind('mousedown',function()  //dialog右上角的叉
                {
                    $("input").ligerHideTip();
                    dlgedit.hide();
                    hideOverlay();
                });
                /*f_addTab1(item.id, '添加成员', 'linkAdd', navtab, height);*/
            } else if(item=='update') {
                if(!obj){
                    $.ligerDialog.question("请选择要修改的数据！！！");
                    return;
                }
                f_addTab1(item, '修改角色', 'linkUpdate?id='+obj.id, navtab, height);
            } else if(item=='delete') {
                var obj= dataGrid.getSelecteds();
                var height = $(".l-layout-center").height();
                if(obj.length>0){
                    $.ligerDialog.confirm("确定删除所选数据吗?",function (data) {
                        if(data){
                            var ids ='';
                            /*<![CDATA[*/
                            for(var i=0;i<obj.length-1;i++){
                                ids+=obj[i].id+",";
                            }
                            ids+=obj[obj.length-1].id;
                            /*]]>*/
                            if(ids!=''){
                                $.ajax({
                                    type: 'POST',
                                    url: 'deleteBacth',
                                    data: {
                                        ids:ids
                                    },
                                    dataType: 'json',
                                    success: function(data){
                                        dataGrid.reload();
                                    }
                                });
                            }
                        }
                    })
                }else{
                    $.ligerDialog.question("请选择要删除的数据！！！");
                }
            } else if(item == 'member') {
                if(!obj){
                    $.ligerDialog.question("请选择角色！！！");
                    return;
                }
                f_addTab1(item, '角色成员管理', 'member/linkList?id='+obj.id+'&roleName='+obj.roleName, navtab, height);
            }
        }

        function callBack()
        {
            navtab.removeTabItem('add');
            navtab.removeTabItem('update');
            dataGrid.reload();
        }
        function Back(id,roleName,height) {
            navtab.addTabItem({
                tabid: 'add',
                text: '添加成员',
                url: 'member/linkAdd?id='+id+'&roleName='+roleName,
                height:height,
                callback: function ()
                {

                }
            });
        }
        function search() {
            var data = $("#searchFrom").serializeArray();
            loadDataAptitude(data);
        }
        function reset() {
            $("#searchFrom")[0].reset();
        }
        var dataGrid =null;
        //加载角色列表
        function loadDataAptitude(data){
            dataGrid   =$("#maingrid").ligerGrid({
                height: '100%',
                columns: [
                    { display: '操作', value: '操作', minWidth: 120,render: function (rowdata)
                    {
                        // '<a onclick="deletedRows('+rowdata.id+')" href="javasrcipt:;">删除</a>'
                        return '<a onclick=menuTree("'+rowdata.id+'") href=javasrcipt:;>权限</a>';
                    }
                    },
                    { display: '角色代码', name: 'roleCode',minWidth: 180 },
                    { display: '角色名称', name: 'roleName', minWidth: 400 },
                    { display: '创建人', name: 'creator', minWidth: 140},
                    { display: '创建时间', name: 'createTime',type:"toDate",format:"yyyy年MM月dd日"}
                ],
                parms:data,
                toolbarShowInLeft: false,
                rownumbers: true,
//                toolbar: {
//                    items: [
//                        { text: '添加角色', click: itemclick, icon: 'add',id:'add' },
//                        { line: true },
//                        { text: '修改角色', click: itemclick, icon: 'modify',id:'update' },
//                        { line: true },
//                        { text: '删除角色',id:'delete', click: itemclick, img: '/plugin/ligerUI/skins/icons/delete.gif' },
//                        { line: true },
//                        { text: '成员管理',id:'member', click: itemclick, icon:'memeber' }
//                    ]
//                },
                checkbox:true,
                rownumbers: true,
                autoFilter: true,
                dataAction:"local",
                url:"list",
                usePager:true,
                pageSize:"10",//分页页面大小
                pageSizeOptions:[10,20,30],//可指定每页页面大小
                dateFormat: "yyyy-MM-dd hh:mm:ss"
            });
            var s=  $(".l-panel-topbarinner .l-toolbar-item:last").find(".l-icon-search2");
            if(s.length==1){
                $(".l-panel-topbarinner .l-toolbar-item:last").remove();
            }
        }
        function subs (){
            var data = $("#subForm").serialize();
            $.ajax({
                type: 'POST',
                url: 'add',
                data: data,
                dataType: 'json',
                success: function(data){
                    $.ligerDialog.success('保存成功');
                    dataGrid.reload();
                },
                error:function(){
                    $.ligerDialog.error('保存失败');
                }
            });
        }
    </script>
</head>
<body style="padding:4px">
<div id="layout1">
    <div  position="center" title="">
        <div id="tab1" style="width: 100%;overflow:hidden;">
            <div id="tis" title="角色列表">
                <form id="searchFrom">
                    <div>
                        <label>角色名称</label>
                        <input  name="roleName" type="text"/>
                        <input name="type" type="button" onclick="search()" value="搜索"/>
                        <input name="type" type="button" onclick="reset()" value="重置"/>
                    </div>
                </form>
                <div>
                    <!--<a href="javascript:toolbarclick('add')">增加</a>-->
                    <!--<a href="javascript:toolbarclick('delete')">删除</a>-->
                    <!--<a href="javascript:toolbarclick('update')">修改</a>-->
                    <a shiro:hasPermission="/sec/role/linkAdd" href="javascript:toolbarclick('add')">增加角色</a>
                    <a shiro:hasPermission="/sec/role/deleteBacth" href="javascript:toolbarclick('delete')">删除角色</a>
                    <a shiro:hasPermission="/sec/role/linkUpdate" href="javascript:toolbarclick('update')">修改角色</a>
                    <a shiro:hasPermission="/sec/role/member/linkList" href="javascript:toolbarclick('member')">成员管理</a>
                </div>
                <div class="l-clear"></div>
                <div  id="maingrid"></div>
            </div>
        </div>
    </div>
</div>
<div id="dig" style="display: none;height: 300px;">
    <ul id="tree9"></ul>
</div>

<div id="overlay"></div>

<div id="add" style="display: none">
    <form id="subForm">
        <div class="formDiv" style="width: 90%;">
            <div class="formLine">
                <div class="formInp">
                    <span>角色名称：</span>
                    <input class="blue testTxt" placeholder="必填" required data-msg-required="角色名称不能为空" type="text" name="roleName"/>
                </div>
            </div>
            <div class="formDiv">
                <div class="formLine">
                    <div class="formInp">
                        <input class="blue testTxt1" type="hidden" name="creator"  th:value="${session.userSession.userName}"/>
                    </div>
                </div>
            </div>
        </div>
        <input name="deleted" type="hidden" value="0" />
    </form>
</div>
</body>
</html>